<template>
	<view class="payment">
		<view class="pay-info">
			<view class="merchant">
				<image class="merchant-image" src="" mode="aspectFit"></image>
				<view class="merchant-name">茶颜悦色国金一店</view>
			</view>
			<view class="amount">
				<view class="amount-title">金额</view>
				<view class="amount-value">
					¥
					<input class="amount-input" type="text" value="" />
				</view>
				<view class="amount-tip">正在向该店付款，请认真核对</view>
			</view>
		</view>
		<view class="allotment">
			<view class="allot-item">
				<view class="allot-main">
					<view class="allot-title">数字资产(共¥500.00)</view>
					<input class="allot-value" placeholder-class="placeholder" type="text" value="" placeholder="请输入抵扣金额"/>
				</view>
				<view class="allot-tip">最高抵扣10%</view>
			</view>
			<view class="allot-item">
				<view class="allot-main">
					<view class="allot-title">账户金额(共¥500.00)</view>
					<input class="allot-value" placeholder-class="placeholder" type="text" value="" placeholder="请输入抵扣金额"/>
				</view>
				<view class="allot-tip">最高抵扣10%</view>
			</view>
		</view>
		<view class="actual-pay">
			<view class="actual-title">实际支付</view>
			<view class="actual-value">¥500.00</view>
		</view>
		<button class="payment-button" :disabled="!submitable" type="default">付款</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		computed:{
			submitable(){
				return false
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/css/mixins.scss';
	$fontColor:#303133;

	@mixin fontTitle {
		font-size: 28rpx;
		color: $fontColor;
		line-height: 40rpx;
	}

	@mixin box {
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 5rpx;
	}

	.payment {}

	.pay-info {
		@include flex(center, center, column);
		@include box;

		.merchant {
			.merchant-image {
				width: 120rpx;
				height: 120rpx;
			}

			.merchant-name {
				margin-top: 20rpx;
				font-size: 32rpx;
				color: $fontColor;
				line-height: 46rpx;
			}
		}

		.amount {
			margin-top: 64rpx;
			.amount-title {
				@include fontTitle;
			}

			.amount-value {
				@include flex(flex-start,flex-end);
				margin-top: 24rpx;
				padding-bottom: 24rpx;
				font-size: 36rpx;
				color: #323232;
				// line-height: 50rpx;
				border-bottom: 1rpx solid #E8E8E8;

				.amount-input {
					margin-left: 16rpx;
					font-size: 60rpx;
					line-height: 60rpx;
				}
			}

			.amount-tip {
				margin-top: 15rpx;
				font-size: 24rpx;
				color: #FF4544;
				line-height: 33rpx;
			}
		}
	}


	.allotment {
		@include box;
		.allot-item {
			margin-top: 22rpx;

			&:first-child {
				margin-top: 0;
			}

			.allot-main {
				@include flex(space-between);

				.allot-title {
					@include fontTitle;
				}

				.allot-value {
					width: 238rpx;
					height: 64rpx;
					background: #F5F5F5;
					border-radius: 4rpx;
					font-size: 28rpx;
					color: $fontColor;
					text-align: center;
					
				}
				/deep/.placeholder {
					color: #909399;
				}
			}

			.allot-tip {
				text-align: right;
				font-size: 24rpx;
				color: #909399;
				line-height: 34rpx;
			}
		}
	}

	.actual-pay {
		@include box;
		@include flex(space-between);

		.actual-title {
			@include fontTitle;
		}

		.actual-value {
			font-size: 36rpx;
			color: #FF4544;
			line-height: 50rpx;
		}
	}

	.payment-button {
		margin: 0 auto;
		width: 630rpx;
		height: 88rpx;
		border-radius: 42px;

		background: #FF4544;
		font-size: 28rpx;
		color: #fff;
		line-height: 88rpx;
		&::after {
			display: none;
		}

		&[disabled] {
			background: #FF4544!important;
			color: #fff!important;
			opacity: 0.3;
		}
	}
</style>
